<template>
	<el-card style="margin: 15px; min-height: calc(100vh - 80px)">
		<div>
			<!--    功能区-->
			<div style="margin: 10px 0">
				<!--    搜索区-->
				<div style="margin: 10px 0">
					<el-input v-model="searchPARAM.name" clearable placeholder="请输入名称" style="width: 20%" />
					<el-select v-model="searchPARAM.type" placeholder="请选择状态" clearable="" style="width: 15%">
						<el-option label="影视类" value="影视类" />
						<el-option label="书籍类" value="书籍类" />
						<el-option label="工具类" value="工具类" />
						<el-option label="其他类" value="其他类" />
					</el-select>
					<el-select v-model="searchPARAM.isHide" placeholder="是否隐藏" clearable="" style="width: 15%">
						<el-option label="是" value="1" />
						<el-option label="否" value="0" />
					</el-select>
					<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
					<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
					<div style="float: right">
						<el-tooltip content="添加" placement="top">
							<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
						</el-tooltip>
					</div>
				</div>
			</div>
		</div>
		<!--表格-->
		<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
			<el-table-column type="expand">
				<template #default="props">
					<p>名称: {{ props.row.name }}</p>
					<p>类型: {{ props.row.type }}</p>
					<p>网站介绍:</p>
					<p> {{ props.row.introduce}}</p>
					<p>下载地址: {{ props.row.downloadUrl}}</p>
					<p>介绍地址: {{ props.row.introduceUrl}}</p>
				</template>
			</el-table-column>
			<el-table-column label="#" type="index" />
			<el-table-column label="名称" prop="name" sortable />
			<el-table-column label="类型" prop="type" />
			<el-table-column label="状态" prop="isHide">
				<template v-slot="scope">
					<el-tag class="ml-2" type="success" v-if="scope.row.isHide=='0'">显示</el-tag>
					<el-tag class="ml-2" type="error" v-if="scope.row.isHide=='1'">隐藏</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="图片" prop="img">
				<template v-slot="scope">
					<el-image style="width: 100px; height: 100px" :src="this.imgUrl+scope.row.imgFile" :fit="fit" />
				</template>
			</el-table-column>
			<el-table-column label="提取码" prop="downloadPassword"/>
			<el-table-column label="下载地址" prop="downloadUrl" :show-overflow-tooltip="true" />
			<el-table-column label="介绍地址" prop="introduceUrl" :show-overflow-tooltip="true" />
			<el-table-column label="网站介绍" prop="introduce" :show-overflow-tooltip="true" />



			<!--      操作栏-->
			<el-table-column label="操作" width="130px">
				<template #default="scope">
					<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"></el-button>
					<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row)">
						<template #reference>
							<el-button icon="Delete" type="danger"></el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<div style="margin: 10px 0">
			<el-pagination v-model:currentPage="pageNum" :page-size="pageSize" :page-sizes="[5, 10, 20]" :total="total"
				layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>

		<!--弹窗-->
		<el-dialog v-model="dialogVisible" title="操作" width="40%" @close="cancel">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="是否隐藏" prop="isHide">
					<el-radio-group v-model.number="form.isHide">
						<el-radio  :label="1">是</el-radio>
						<el-radio  :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				
				<el-form-item label="类型"  prop="type">
					<el-select v-model="form.type" style="width: 50%" placeholder="请选择类型">
						<el-option label="影视类" value="影视类" />
						<el-option label="书籍类" value="书籍类" />
						<el-option label="工具类" value="工具类" />
						<el-option label="其他类" value="其他类" />
					</el-select>
				</el-form-item>
				
				<el-form-item label="下载地址" prop="downloadUrl">
					<el-input v-model="form.downloadUrl" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="提取码" prop="downloadPassword">
					<el-input v-model="form.downloadPassword" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="介绍地址" prop="introduceUrl">
					<el-input v-model="form.introduceUrl" style="width: 50%"></el-input>
				</el-form-item>
				<el-form-item label="图片" prop="img">
					<el-upload class="avatar-uploader" action="" :http-request="upload" :show-file-list="false">
						<img v-if="fromImg" :src="fromImg" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon">
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item label="网站介绍" prop="introduce">
					<el-input v-model="form.introduce" type="textarea" :rows="10" style="width: 90%"></el-input>
				</el-form-item>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</span>
			</template>
		</el-dialog>


	</el-card>

</template>

<script src="@/assets/js/Resource.js"></script>





<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
	}
</style>
